.carousel {
  &-indicators {
    &-indicator {
      $size: 6px;
      border: 1px solid theme-color("secondary");
      background: theme-color("light");
      width: $size;
      height: $size;
      flex: 0 0 auto;
      border-radius: 50%;
      &.active {
        background: theme-color("secondary");
      }
    }
  }
  &-vertically-animated {
    // Source: https://stackoverflow.com/questions/42910076/bootstrap-4-alpha-6-vertical-carousel
    .carousel-item {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    .carousel-item-next.carousel-item-left,
    .carousel-item-prev.carousel-item-right {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    .carousel-item-next,
    .active.carousel-item-right {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    .carousel-item-prev,
    .active.carousel-item-left {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  }
  &-icon {
    &-control {
      @mixin arrow {
        z-index: 1;
        top: 0;
        bottom: 42px;
        @include media-breakpoint-up(md) {
          bottom: 70px;
        }
      }
      &-rounded {
        $size: 28px;
        border-radius: 50%;
        width: $size;
        height: $size;
        background: $secondary-background;
        color: $secondary-font-color;
        @include media-breakpoint-up(sm) {
          $size: 44px;
          width: $size;
          height: $size;
        }
      }
      &--previous {
        left: 7px;
        @include arrow;
        @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
          left: -30px;
        }
      }
      &--next {
        right: 7px;
        @include arrow;
        @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
          right: -30px;
        }
      }
    }
  }
  &-items-container {
    margin-left: 7px;
    margin-right: 7px;
    @include media-breakpoint-up(sm) {
      margin-left: 30px;
      margin-right: 30px;
    }
    @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
      margin-left: 0;
      margin-right: 0;
    }
  }
}
